<template>
  <div class="letter-setting">
    <nav>
      <label v-for="(item, index) in tabList" :key="index">
        <input type="radio" name="letter" :checked="index === 0" @click="tabItem.click(item.component)">
        <div>{{ item.label }}</div>
      </label>
    </nav>
    <div>
      <component :is="tabItem.component"></component>
    </div>
  </div>
</template>
<script setup>
import { ref, shallowRef } from "vue";
import letterTemplate from './template.vue';
import buy from './buy.vue';
import sendRecord from './send-record.vue';
const tabItem = ref({
  click: (component) => {
    tabItem.value.component = component;
  },
  component: shallowRef(letterTemplate),
})
const tabList = ref([{
  label: '收银机设置',
  component: shallowRef(letterTemplate),
},
{
  label: '收款方式设置',
  component: shallowRef(buy),
},
{
  label: '充值设置',
  component: shallowRef(sendRecord),
}
])
</script>
<style lang="less" scoped>
.letter-setting {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 118px auto;
  height: 100%;

  * {
    line-height: 1;
  }

  >nav {
    display: flex;
    padding: 30px;
    box-sizing: border-box;

    >label {
      margin-right: 18px;

      >input {
        display: block;
        width: 0;
        height: 0;
        opacity: 0;
      }

      >input+div {
        width: 158px;
        height: 60px;
        font-size: 24px;
        color: #666;
        background: #f8f8f8;
        box-shadow: 0 0 0 1px #e5e5e5;
        border-radius: 5px;
        text-align: center;
        line-height: 60px;
      }

      >input+div+div {
        position: absolute;
        display: none;
        width: 100%;
        left: 0;
        margin-top: 30px;
      }

      >input:checked+div {
        color: #fff;
        background: #1981f4;
        box-shadow: none;
      }
    }
  }
}
</style>